<template>
	<div class="flex_row">
		<div class="flex_col m5 p10" style="height: 80vh; overflow-y: scroll;">
			<ProductItem v-for="(item, index) in ctx.items" :key="index" :product="item.product"
				:style="{ background: item.background }"
				@click="onItemClick(index)" />
		</div>
		<div class="flex_col card p10 m5 flex_start_self">
			<div class="flex_row_center mt10">
				<label>商品名称</label>
				<el-input v-model="ctx.name" class="ml5" clearable style="width: 300px;" />
			</div>
			<div class="flex_row_center mt10">
				<label>商品价格</label>
				<el-input v-model="ctx.price" class="ml5" clearable style="width: 300px;" />
			</div>
			<FileInput @file-select="onFileInput" class="mt10" accpet="image/*" name="选择图片" />
			<div class="flex_row_center mt10">
				<el-button @click="onClickCreate" type="primary">创建</el-button>
				<el-button @click="onClickModify" type="info">修改</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import FileInput from './FileInput.vue';
import { run, runAction } from '@/utils/ui';
import { product2Create, product2Edit, product2Query } from '@/service/http';
import ProductItem from './ProductItem.vue';
import type { Product2 } from '@/service/model';
import { priceFormat } from '@/service/utils';

let selectFile: File | null = null;
let modifyProduct: Product2 | null = null;
interface P2Item {
	product: Product2,
	background: string,
}

interface Ctx {
	name: string,
	price: string,
	items: P2Item[],
}
const ctx = reactive<Ctx>({
	name: '',
	price: '5',
	items: [],
});

function onFileInput(file: File | null) {
	selectFile = file;
}

function onItemClick(index: number) {
	for (let i = 0; i < ctx.items.length; i++) {
		const item = ctx.items[i];
		if (i == index) {
			item.background = '#ddd';
		} else {
			item.background = 'white';
		}
	}
	modifyProduct = ctx.items[index].product;
	ctx.name = modifyProduct.name;
	ctx.price = priceFormat(modifyProduct.price);
}

async function onClickCreate() {
	await runAction('创建商品', "创建中", async () => {
		if (ctx.name.length == 0) {
			throw '请输入商品名称';
		}
		if (ctx.price.length == 0) {
			throw '请输入价格';
		}
		if (selectFile == null) {
			throw '请选择图片';
		}
		const image = new Uint8Array(await selectFile.arrayBuffer());
		const price = Math.floor(parseFloat(ctx.price) * 100);
		await product2Create(ctx.name, price, image);
		await update();
	});
	
}

async function onClickModify() {
	await runAction('修改商品', "修改中", async () => {
		if (modifyProduct == null) {
			throw '请选择需要修改的商品';
		}
		if (ctx.name.length == 0) {
			throw '请输入商品名称';
		}
		if (ctx.price.length == 0) {
			throw '请输入价格';
		}
		let image: Uint8Array | null = null
		if (selectFile != null) {
			image = new Uint8Array(await selectFile.arrayBuffer());
		}
		const price = Math.floor(parseFloat(ctx.price) * 100);
		await product2Edit(modifyProduct.id, ctx.name, price, image);
		await update();
	});
	
}

async function update() {
	ctx.items = [];
		ctx.items = (await product2Query()).map<P2Item>((v) => {
			return {
				product: v,
				background: 'white'
			}
		});
		modifyProduct = null;
}

async function init() {
	run(async () => {
		update();
	})
}

init();

</script>